<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // var wd = ""; // 搜索关键词(默认查询所有)
    // var col = "id";// 排序列名(默认按编号排序)
    // var type = "asc"; // 排序方式(默认升序   desc:降序)
    // var page = 1;  // 展示的页面(默认第一页)
    // var size = 5;  // 每页展示多少条

    // var xhr = new XMLHttpRequest();

    // xhr.open("get", `http://121.43.116.41/demo/php/searchGradeOrderLimit.php?wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`, true);

    // xhr.send();

    // xhr.onreadystatechange = function () {
    //     if (xhr.readyState == 4 && xhr.status == 200) {
    //         var result = xhr.responseText;

    //         // 数据处理
    //         result = JSON.parse(result);
    //         console.log(result);

    //         // 动态生成

    //     }
    // }



    /* 
        get()  发送get请求
        url 请求的地址
        data 请求携带的数据
        async 是否异步
        dataType 接口返回的数据类型 (text(默认)/css/js/json)
        success  成功时的回调函数


        多参数传参的缺点:
            a. 多参数传参,讲究一一对应, 如果参数没对象,函数调用就会出问题
            b. 即便函数的参数设置默认值,也不能省略  
            优化:  如何函数的参数比较多,建议将其整合到对象中!
    */
    function get(url, data, async = true, dataType = "text", success) {


        var xhr = new XMLHttpRequest();

        xhr.open("get", data ? url + "?" + data : url, async);

        xhr.send();

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;

                // 数据处理
                if (dataType == "json") {
                    result = JSON.parse(result);
                }
                // console.log(result);

                // 拿到数据之后的可能操作
                // 列表数据 =>  动态生成(成绩表 商品列表)
                // 数据增删改  => 增删改成功/失败


                if (success) { //  在请求成功之后调用回调函数
                    success(result);  // 回调函数调用过程中出入实际参数(请求的结果)
                }

            }
        }
    }

    // get("http://121.43.116.41/demo/php/searchGradeOrderLimit.php", "wd=&col=id&type=asc&page=1&size=10", true, "json", function (res) {
    //     console.log("请求成功", res);
    // });

    get("wd=&col=id&type=asc&page=1&size=10", "http://121.43.116.41/demo/php/searchGradeOrderLimit.php", true, "json", function (res) {
        console.log("请求成功", res);
    });



</script>

</html>